<template>
	<el-container>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-input v-model="search.keyword" placeholder="关键词" clearable />
					<el-button type="primary" icon="Search" @click="upsearch">
						查询
					</el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<!--ClusterNodeCategory-->
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="tableRef" :apiObj="list.apiObj" row-key="id" stripe>
					<el-table-column label="主机名" prop="hostname" width="250" />
					<el-table-column label="状态" prop="status" width="150" />
					<el-table-column label="IP地址" prop="ip_address" width="150" />
					<el-table-column label="环境" prop="os_version" width="150" />
					<el-table-column label="CPU/内存" width="150">
						<template #default="{row}">
							{{row.cpu_cores}}/ {{row.memory_gb}}/ {{row.disk_gb}}
						</template>
					</el-table-column>
					<el-table-column label="备注" prop="remark" width="200" />
					<el-table-column label="创建时间" prop="created_at" width="200" />
					<el-table-column label="操作" fixed="right" align="right" width="160">
						<template #default>
							<el-button-group>
								<el-button link type="primary" size="small">查看</el-button>
								<el-button link type="primary" size="small">编辑</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="drawer" title="节点编辑" size="960" direction="rtl">

	</el-drawer>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'
	//import orAnd from './template/index.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 组件引用
	const tableRef = ref(null)

	// 响应式数据
	const drawer = ref(false)
	const search = reactive({
		keyword: ""
	})

	const list = reactive({
		apiObj: proxy.$API.system.clusterNode.list
	})

	//表单数据

	const groupClick = (data) => {
		const params = {
			category_id: data.id
		}
		tableRef.value?.reload(params)
	}

	const upsearch = () => {
		tableRef.value?.upData(search)
	}

	onMounted(async () => {
		// let array = await TreeApi.get()
		// groups.value = array.data
	})
</script>

<style scoped>
	.left-panel {
		display: flex;
		gap: 10px;
	}

	.right-panel-search {
		display: flex;
		gap: 10px;
	}

	.nopadding {
		padding: 0;
	}

	:deep(.el-button--link) {
		padding: 0;
		min-height: auto;
	}
</style>
